<template>
  <div>
    <el-drawer v-model="visible" :direction="direction" size="700px" title="流程设置" :close-on-click-modal="false">
      <template #default>
        <div>
          <el-form :model="form" label-width="auto">
            <el-card shadow="never">
              <span> 注：根据模板能够更快配置数据源，如需使用自定义，可使用更高级的可视化配置。 </span>
            </el-card>
            <el-divider content-position="left">参数配置</el-divider>
            <el-card shadow="never">
              <el-form-item label="参数">
                <el-input v-model="form.params" type="textarea" :autosize="{ minRows: 20, maxRows: 30 }" />
              </el-form-item>
            </el-card>
          </el-form>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button>取消</el-button>
          <el-button type="primary" @click="onSubmit()">提交</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import type { DrawerProps } from "element-plus";
import { reactive, ref } from "vue";
const emit = defineEmits(["update"]);
const visible = ref(false);
const direction = ref<DrawerProps["direction"]>("rtl");
const init = (params: string) => {
  visible.value = true;
  form.params = params;
};
// do not use same name with ref
const form = reactive({
  params: ""
});

const onSubmit = () => {
  console.log("submit!");
  emit("update", form.params);
};
defineExpose({
  init
});
</script>

<style scoped></style>
